<template>
  <div>
    <div class="top">
      <el-form label-position="left" label-width="100px">
        <el-form-item label="订单编号:">
          <el-input v-model="form.id"></el-input>
        </el-form-item>
        <el-form-item label="订单状态:">
          <el-select v-model="form.status" placeholder="请选择">
            <el-option
                v-for="item in ordeStatus"
                :key="item.id"
                :label="item.name"
                :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="付费状态">
          <el-select v-model="form.paymentStatus" placeholder="请选择">
            <el-option
                v-for="item in PaidStatus"
                :key="item.id"
                :label="item.name"
                :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="发件人姓名:">
          <el-input v-model="form.senderName"></el-input>
        </el-form-item>
        <el-form-item label="发件人电话:">
          <el-input v-model="form.senderPhone"></el-input>
        </el-form-item>
        <el-form-item label="发件人地址:">
          <el-select
              v-model="form.senderProvinceId"
              placeholder="请选择"
              style="width: 80px"
              @change="senderProvinceChange"
          >
            <el-option
                v-for="item in SenderProvince"
                :key="item.id"
                :label="item.name"
                :value="item.id"
            >
            </el-option>
          </el-select>
          <el-select
              v-model="form.senderCityId"
              placeholder="请选择"
              style="width: 80px"
              @change="senderCityChange"
          >
            <el-option
                v-for="item in senderCityId"
                :key="item.id"
                :label="item.name"
                :value="item.id"
            >
            </el-option>
          </el-select>
          <el-select
              v-model="form.senderCountyId"
              placeholder="请选择"
              style="width: 80px"
          >
            <el-option
                v-for="item in senderCountyId"
                :key="item.id"
                :label="item.name"
                :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="收件人姓名:">
          <el-input v-model="form.receiverName"></el-input>
        </el-form-item>
        <el-form-item label="收件人电话:">
          <el-input v-model="form.receiverPhone"></el-input>
        </el-form-item>
        <el-form-item label="收件人地址:">
          <el-select
              v-model="form.receiverProvinceId"
              placeholder="请选择"
              style="width: 80px"
              @change="receiverProvinceChange"
          >
            <el-option
                v-for="item in receiverProvince"
                :key="item.id"
                :label="item.name"
                :value="item.id"
            >
            </el-option>
          </el-select>
          <el-select
              v-model="form.receiverCityId"
              placeholder="请选择"
              style="width: 80px"
              @change="receiverCityChange"
          >
            <el-option
                v-for="item in receiverCityId"
                :key="item.id"
                :label="item.name"
                :value="item.id"
            >
            </el-option>
          </el-select>
          <el-select
              v-model="form.receiverCountyId"
              placeholder="请选择"
              style="width: 80px"
          >
            <el-option
                v-for="item in receiverCountyId"
                :key="item.id"
                :label="item.name"
                :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <div>
          <el-button type="warning" @click="search">搜索</el-button>
          <el-button type="danger" @click="reset">重置</el-button>
        </div>
      </el-form>
    </div>
    <el-table :data="Data" border style="width: 100%; font-size: 12px">
      <el-table-column label="序号" width="60" type="index"> </el-table-column>
      <el-table-column prop="id" label="订单编号" width="80"> </el-table-column>
      <el-table-column prop="transportOrder.id" label="运单编号" width="80">
      </el-table-column>
      <el-table-column prop="estimatedArrivalTime" label="下单时间" width="80">
      </el-table-column>
      <el-table-column
          prop="status"
          label="订单状态"
          width="80"
      >
        <template #default="{row}">
          {{statusFormatter(row.status)}}
        </template>
      </el-table-column>
      <el-table-column prop="senderName" label="发件人姓名" width="80">
      </el-table-column>
      <el-table-column prop="senderPhone" label="发件人电话" width="80">
      </el-table-column>
      <el-table-column prop="senderAddress" label="发件人地址" width="120">
      </el-table-column>
      <el-table-column prop="receiverName" label="收件人姓名" width="80">
      </el-table-column>
      <el-table-column prop="receiverPhone" label="收件人电话" width="80">
      </el-table-column>
      <el-table-column prop="receiverAddress" label="收件人地址" width="120">
      </el-table-column>
      <el-table-column prop="pickupType" label="取件类型" width="80">
      </el-table-column>
      <el-table-column
          prop="paymentMethod"
          label="付费类型"
          width="80"
          :formatter="paymentMethodFormatter"
      >
      </el-table-column>
      <el-table-column
          prop="paymentStatus"
          label="付费状态"
          width="80"
          :formatter="paymentStatusFormatter"
      >
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="80">
        <template #default="{ row }">
          <el-button type="text" size="small" @click="vieDetails(row.id)"
          >查看详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @current-change="currentPage"
        :page-size="form.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
import {getTableListApi} from "@/api/order-mange";
const map = {
  23000:'待取件',
  23001:'已取件',
  23002:'网点自寄',
  23004:'待装车',
  23005:'运输中',
  23006:'网点出库',
  23007:'待派送',
  23008:'派送中',
  23009:'已签收',
  23010:'拒收',
  23011:'已取消'
}
export default {
  name: "order-manage",
  data() {
    return {
      form: {
        page: 1,
        pageSize: 10,
        id: "",
        status: "",
        paymentStatus: "",
        senderName: "",
        senderPhone: "",
        senderProvinceId: "", //寄件人地区
        senderCityId: "",
        senderCountyId: "",
        receiverName: "",
        receiverPhone: "",
        receiverProvinceId: "", //收件人
        receiverCityId: "",
        receiverCountyId: "",
      },
      total: 1,
      Data: [{}],
      ordeStatus: [
        {
          name: "待取件",
          id: 23000,
        },
        {
          name: "已取件",
          id: 23001,
        },
        {
          name: "网点自寄",
          id: 23002,
        },
        {
          name: "网点入库",
          id: 23003,
        },
        {
          name: "待装车",
          id: 23004,
        },
        {
          name: "运输中",
          id: 23005,
        },
        {
          name: "网点出库",
          id: 23006,
        },
        {
          name: "待派送",
          id: 23007,
        },
        {
          name: "派送中",
          id: 23008,
        },
        {
          name: "已签收",
          id: 23009,
        },
        {
          name: "拒收",
          id: 230010,
        },
        {
          name: "已取消",
          id: 230011,
        },
      ],
      PaidStatus: [
        {
          name: "未付款",
          id: 1,
        },
        {
          name: "已付款",
          id: 2,
        },
      ],
      SenderProvince: [],
      senderCityId: [],
      senderCountyId: [],
      receiverProvince: [],
      receiverCityId: [],
      receiverCountyId: [],
    };
  },
  created() {
    this.getTableList()
  },
  methods: {
    async  getTableList() {
      const res =await getTableListApi(this.form)
      console.log(res)
      this.Data=res.data.items
    },
    //获取page数据
    async getorderManager(obj) {

    },
    currentPage(num) {

    },
    //根据父id获取地址信息
    async getAddress() {

    },
    //寄件人Province
    async senderProvinceChange(num) {

    },
    //寄件人City
    async senderCityChange(num) {

    },
    //收件人Province
    async receiverProvinceChange(num) {

    },
    //收件人City
    async receiverCityChange(num) {

    },
    search() {

    },
    reset() {

    },
    //查看详情
    vieDetails(id) {
      this.$router.push({
        path:'/transit/editorder',
        query:{
          id:id
        }
      })
    },
    statusFormatter(id) {
      return map[id]
    },
    paymentMethodFormatter(a, b, c) {
      const obj = {
        1: "未付",
        2: "已付",
      };
      return obj[c];
    },
    paymentStatusFormatter(a, b, c) {
      const obj = {
        1: "未付",
        2: "已付",
      };
      return obj[c];
    },
  },
};
</script>

<style lang="scss" scoped>
.el-form.el-form--label-left {
  padding: 20px;
  background-color: #fff;
  display: flex;
  justify-content: space-around;
  flex-flow: row wrap;
  .el-form-item {
    width: 30%;
  }
}
</style>
